<script setup lang="ts">
  import {reactive} from 'vue'
  let news = reactive([{
    id:1,
    title:'预制菜',
    content:'最新政策，预制菜很好！'
  },
  {
    id:2,
    title:'大学生就业',
    content:'大环境很好！'
  },{
    id:3,
    title:'嘎子',
    content:'进去踩缝纫机了！'
  }])

</script>
<template>
  <h1>新闻列表</h1>
  <hr>
  <div class="news">
    <div class="left">
      <ul>
        <li v-for="n in news" :key="n.id">
          <RouterLink :to="{name:'details',params:{id:n.id,title:n.title,content:n.content}}">
            {{ n.title }}
          </RouterLink>
        </li>
      </ul>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
  
</template>
<style scoped>
  .news{
   display: flex; 
  }
  .left{
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
  }
  .right{
    width: 300px;
    height: 400px;
    border: 1px solid red;
    margin-left: 20px;
  }
  
  
</style>